<template>
  <div>
    <el-form ref="form" label-width="200px">
      <h2 style="text-align:center;">发布新直播</h2>

      <el-form-item label="直播标题" style="width: 900px">
        <el-input v-model="live.title"></el-input>
      </el-form-item>
      <el-form-item label="直播描述">
        <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="live.introduction" style="width: 700px;">
        </el-input>
      </el-form-item>
      <el-form-item label="直播封面">
        <el-upload
          class="avatar-uploader"
          action=""
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="直播教师" style="width: 900px">
        <el-input v-model="live.teacherName"></el-input>
      </el-form-item>
      <el-form-item label="教师头衔" style="width: 900px">
        <el-input v-model="live.teacherTitle"></el-input>
      </el-form-item>
      <el-form-item label="持续时间">
        <el-date-picker type="datetime" value-format="timestamp" placeholder="开始时间" v-model="live.gmtStart" style="width: 332px;"></el-date-picker>
        ——
        <el-date-picker type="datetime" value-format="timestamp" placeholder="结束时间" v-model="live.gmtEnd" style="width: 332px;"></el-date-picker>
      </el-form-item>
      <div
        style="width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: center;margin-top: 20px;margin-bottom: 20px">
        <el-button type="primary" @click="saveLive">保存</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import {client} from "@/plugins/oss";

export default {
  data() {
    return {
      loading:false,


      live: {},
      imageUrl:null,

    }
  },
  mounted() {
    if(this.$route.query && this.$route.query.id){
      this.getLiveInfo(this.$route.query.id)
    }
  },
  methods: {
    getLiveInfo(liveId){
      this.$api.getLiveInfo({liveId}).then(res=>{
        this.live = res.data
        this.imageUrl = this.live.cover
      })
    },
    saveLive() {
      this.live.cover = this.imageUrl ? this.imageUrl : this.live.cover
      if(this.live.id){
        this.$api.updateLive(this.live).then(()=>{
          this.$message.success("成功")
        })
      }else {
        this.$api.saveLive(this.live).then(()=>{
          this.$message.success("成功")
        })
      }
    },

    handleAvatarSuccess(res, file) {
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }


      client()
        .multipartUpload(file.name || Date.now().toString(), file)
        .then((result) => {
          let url = result.res.requestUrls[0];
          this.imageUrl = url.split("?upload")[0]
        });

    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
